@function multiple-box-shadow($n, $width, $height) {
  $value: "#{random() * $width} #{random() * $height} #FFF";

  @for $i from 2 through $n {
    $value: "#{$value}, #{random() * $width} #{random() * $height} #FFF";
  }

  @return unquote($value);
}

@media (max-width: 1400px) {
  $width: 1500px;
  $height: 1500px;
  $shadows-small: multiple-box-shadow(700, $width, $height);
  $shadows-medium: multiple-box-shadow(200, $width, $height);
  $shadows-big: multiple-box-shadow(100, $width, $height);

  .login {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: url("../assets/background.jpg") no-repeat center center;
    background-size: cover;
    box-sizing: border-box;
  }

  .starts {
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow: $shadows-small;
    animation: animStar 50s linear infinite;
  }

  .starts2 {
    width: 2px;
    height: 2px;
    box-shadow: $shadows-medium;
    animation: animStar 100s linear infinite;
  }

  .starts3 {
    width: 3px;
    height: 3px;
    background: transparent;
    box-shadow: $shadows-big;
    animation: animStar 150s linear infinite;
  }
}

@media (min-width: 1400px) {
  $width: 150vw;
  $height: 150vh;
  $shadows-small: multiple-box-shadow(700, $width, $height);
  $shadows-medium: multiple-box-shadow(200, $width, $height);
  $shadows-big: multiple-box-shadow(100, $width, $height);

  .login {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: url("../assets/background.jpg") no-repeat center center;
    background-size: cover;
    box-sizing: border-box;
  }

  .starts {
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow: $shadows-small;
    animation: animStar 50s linear infinite;
  }

  .starts2 {
    width: 2px;
    height: 2px;
    box-shadow: $shadows-medium;
    animation: animStar 100s linear infinite;
  }

  .starts3 {
    width: 3px;
    height: 3px;
    background: transparent;
    box-shadow: $shadows-big;
    animation: animStar 150s linear infinite;
  }
}

@keyframes animStar {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-2000px);
  }
}
